<div class="card mb-4" id="user-details">
  <%= turbo_frame_tag :edit_user do %>
    <div class="card-header d-flex align-items-center justify-content-between">
      <h5 class="card-title">
        <%= Spree.t(:details) %>
      </h5>
      <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_user_path(@user), class: 'btn btn-light btn-sm', data: { turbo_frame: :edit_user } %>
    </div>
    <div class="card-body p-0">    
      <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <%= Spree.t(:email) %>
          <span>
            <%= @user.email %>
            <%= clipboard_component(@user.email) %>
          </span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <%= Spree.t(:phone) %>
          <span>
            <%= @user.phone.presence || Spree.t(:not_available) %>
          </span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <%= Spree.t(:name) %>
          <span>
            <%= customer_full_name(@user) %>
          </span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <%= Spree.t(:email_marketing) %>
          <%= active_badge(@user.accepts_email_marketing?) %>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <%= Spree.t(:tags) %>
          <span>
            <% @user.tag_list.each do |tag| %>
              <span class="tag small"><%= tag %></span>
            <% end %>
          </span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
          <%= Spree.t(:roles) %>
          <span>
            <% @user.spree_roles.each do |role| %>
              <span class="tag small"><%= role.name %></span>
            <% end %>
          </span>
        </li>
      </ul>
    </div>
  <% end %>
</div>